<template>
    <div class="prepare">
        <!-- <div class="title title-font">
          D a y s
        </div> -->
        <canvas class="canvas"></canvas>
</div>
</template>

<script>

// 导入公有组件


import {Boll, TextStyle} from '@/common/js/utils/canvasClass'
export default {
    name: 'prepare',
    // 注册组件
    components: {},

    // 数据
      data(){
        return {
          num:new Array(100).keys(),
          physical:{
            count: 30,
            swing: 2,
            size:10,
          }
        }
      },

    // 方法
    methods: {
    },

    // 侦听器
    watch: {
      /*  深度侦听 
      Object: {
        handler: function(value){
          console.log(value)
        }
        // 一上来就触发侦听
        immediate: true
      }
      */
    },

    // 计算属性
    computed: {},

    // 创建后
    created(){},

    // 组件挂载后
    mounted(){
      /** @type {HTMLCanvasElement} */
      const relCanvas = document.querySelector('.canvas')
      console.log(relCanvas)
      const ctx = relCanvas.getContext('2d')

      const W  = relCanvas.width =  window.innerWidth
      const H  = relCanvas.height = window.innerHeight


      let generateBollList = () => {
        const list = []
        for (let index = 0; index < this.physical.count; index++) {
          list.push(new Boll(
            {
              r: this.$common.C.generateCount(this.physical.size, 20),
              fillStyle: this.$common.C.generateColor(55,255, 1),
              x: W/2,
              
              y: H,
              vx: this.$common.C.generateCount(-4, 4),
              vy: this.$common.C.generateCount(-H/50, -H/30),
              // ay: 0.05,

              // 这是更新canvas的插入函数
              updateFunc: obj => {
                if(obj.x + obj.r > W){
                  obj.x = W - obj.r
                  obj.vx = -obj.vx * 0.8
                }

                else if(obj.x - obj.r < 0)
                {
                  obj.x = obj.r
                  obj.vx = -obj.vx * 0.8
                }

                else if(obj.y +  obj.r > H){
                  obj.y = H - obj.r
                  obj.vy = -obj.vy * 0.8
                }
               
                else if(obj.y -  obj.r < 0){
                  obj.vy = -obj.vy * 0.8
                  obj.y = obj.r
                }
                if(Math.abs(obj.vy)  < 0.05){
                  obj.vy = 0
                }
                if(Math.abs(obj.vx)  < 0.05){
                  obj.vx = 0
                }
                if(obj.vy < 0){
                  obj.ay = 0.2
                }
              }
            }
          ))
        }
        return list
      }

      
      function fillText(){
        return new TextStyle({
          text: '你 好',
          font: '100px title',
          shadowColor: 'rgba(0,0,0,1)',
          fillStyle: 'orange',
          x: W/2 - 100,
          y: H/2 -50,
          updateFunc:obj => {
            
          }
        })
      }

      let BollList = generateBollList()
      let text = fillText()
      function render(){
        requestAnimationFrame(render)
        ctx.clearRect(0, 0, W, H)
        text.update(ctx)
        for (const iterator of BollList) {
          iterator.update(ctx)
        }
      }
      render()
    },

    // 组件销毁前
    beforeDestroy(){},
}
</script>

<style lang="scss" scoped>
.prepare {
  font-size: 12vmin;
  width: 100vw;
  height: 100vh;
  // background-color: #000;
  position: relative;
}

.title {
  font-size: 12vmin;
  color: red;
  text-align: center;
  position: absolute;
  top: 35%;
  line-height: 12vmin;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.canvas {
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background-color: transparent;
  position: absolute;
  background-color: #000;
}
</style>